import React, { useState, useEffect } from "react";
import { Input, Button, Select, Form } from "antd";
import { useNavigate } from "react-router-dom";
const { Option } = Select;

const Login = () => {
  const [company, setCompany] = useState("A公司-软件a1"); // 默认选择A公司-软件a1
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [form] = Form.useForm();
  const navigate = useNavigate();

  const handleSubmit = () => {
    // TODO: 处理提交逻辑
    console.log("Company: ", company);
    console.log("Username: ", username);
    console.log("Password: ", password);
    navigate("/home");
  };

  useEffect(() => {
    document.title = "登录页面"; // 设置页面标题
  }, []);

  return (
    <div style={{ margin: "20px" }}>
      <h1>登录页面</h1>
      <Form form={form}>
        <Form.Item label="企业-软件名:">
          <Select
            defaultValue={company}
            style={{ width: 200 }}
            onChange={(value) => setCompany(value)}
          >
            <Option value="ComA-a1">A公司-软件a1</Option>
            <Option value="ComA-a2">A公司-软件a2</Option>
            <Option value="ComA-a3">A公司-软件a3</Option>
            <Option value="ComB-b1">B公司-软件b1</Option>
            <Option value="ComB-b2">B公司-软件b2</Option>
          </Select>
        </Form.Item>
        <Form.Item label="用户名">
          <Input
            type="text"
            placeholder="请输入你的用户名"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </Form.Item>
        <Form.Item label="密码">
          <Input
            type="password"
            placeholder="请输入密码"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={handleSubmit}>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Login;
